<template>
    <div class="com-cnt">
        <i-swiper :items="items">
            <template slot-scope="data">
                <router-link :to="data.src.bannerUrl" tag="span"
                class="swiper-img"
                :style="{backgroundImage:'url('+data.src.photo+')'}"
                >
                </router-link>     
            </template>            
        </i-swiper>
        <icon-com :items="icons"></icon-com>
        <cnt-com>
            <updown-com>
                <titleicon-Com title="精品游玩" slot="up"></titleicon-Com>
                <itemcnt-Com
                  v-for="(item, index) in itemsData"
                  :key="index"
                  type="0"
                  slot="down"
                >
                    <router-link :to="'/travel/'+item.id" tag="div">
                        <updownitem-com cname="border-bottom">
                            <div slot="up" class="img-up-com">
                                <span class="pic">
                                    <img :src="item.picture" alt="">
                                </span>                                        
                            </div>
                            <div slot="down" class="info-down-com">
                                <h3 class="title">{{item.title}}</h3>
                                <p class="num">￥{{item.price}}</p>                                      
                            </div>
                        </updownitem-com>
                    </router-link>                        
                </itemcnt-Com>
            </updown-com>
        </cnt-com>
    </div>
</template>

<script>
import ISwiper from '@/common/swiper/swiper.vue'
import IconCom from '@/common/icon/Icon.vue'
import CntCom from '@/common/cnt/Cnt.vue'
import UpdownCom from '@/common/cnt/Updown.vue'
import TitleiconCom from '@/common/title/Icon.vue'
import ItemcntCom from '@/common/list/Itemcnt.vue'
import UpdownitemCom from '@/common/list/UpdownItem.vue'
import axios from 'axios'
import Qs from 'qs'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'indexPage',
    components: {
        ISwiper,
        IconCom,
        CntCom,
        UpdownCom,
        TitleiconCom,
        ItemcntCom,
        UpdownitemCom
    },
    data ( ) {
        return {
            items: [],
            icons: [
                {
                    img: require('@/assets/imgs/njx.png'),
                    txt: '农佳鲜',
                    url: '/njx'
                },
                {
                    img: require('@/assets/imgs/jhs.png'),
                    txt: '聚划算',
                    url: '/jhs'
                },
                {
                    img: require('@/assets/imgs/activity.png'),
                    txt: '活动中心',
                    url: '/acti'
                },
                {
                    img: require('@/assets/imgs/travel.png'),
                    txt: '度假游',
                    url: '/travel'
                },
                {
                    img: require('@/assets/imgs/pasture.png'),
                    txt: '候鸟式养老',
                    url: '/pasture'
                }
            ],
            itemsData: []
        }
    },
    mounted ( ) {
        if( this.$route.query.userid && parseInt(this.$route.query.type) == 0 ) {
            localStorage.setItem('userid', this.$route.query.userid)
        }       
        if( this.$route.query.userid && parseInt(this.$route.query.type) == 1 ) {
            localStorage.removeItem('userid')
        }        
        this.doAjaxBanner()
        this.doAjaxList()
    },
    methods: {
        doAjaxBanner ( ) {
            let self = this            
            axios({
                url: '/xshk/f/index/banner',
                method:'get',
                headers:{'Content-Type':'application/x-www-form-urlencoded'},
            }).then( res => {self.handleGetBannerSucc( res )}).catch( err => {self.handleGetDataFail( err )})         
        }, 
        handleGetBannerSucc ( res ) {
            res = res.data
            if ( res && res.code == 0 ) {
                this.items = res.data
            }            
        },
        doAjaxList ( ) {
            let self = this            
            axios({
                url: '/xshk/f/tour_list',
                method:'get',
                headers:{'Content-Type':'application/x-www-form-urlencoded'},
                data: Qs.stringify({'pageNumber': self.pageNumber,'pageSize': 10})
            }).then( res => {self.handleGetDataSucc( res )}).catch( err => {self.handleGetDataFail( err )})         
        }, 
        handleGetDataSucc ( res ) {
            res = res.data
            if ( res && res.code == 0 ) {
                this.itemsData = res.data.list
            }
        },
        handleGetDataFail ( err ) {
            console(err)
            maskTips({id:"axios-tips-fail",txt:'网络通信失败!'})
        }        
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl'
.com-cnt
    width 100%
    height auto 
    overflow hidden
    .swiper-img
        width 100%
        display block
        overflow hidden
        padding-bottom  46.66666666666667%
        background-repeat no-repeat
        background-position center
        background-size cover
.img-up-com
    width 100%
    height auto 
    overflow hidden
    .pic 
        width 100%
        height auto 
        overflow hidden
        img 
            display block
            width 100%
            height auto
.info-down-com 
    width 100%
    height auto 
    overflow hidden
    .title  
        width 100%
        height 30px
        line-height 30px
        font-size 16px
        color #333
        ellipsis()
    .num 
        width 100%
        height 25px
        line-height 25px
        font-size 12px
        color red
        ellipsis()    
</style>